<template>
 <div class="whole-box">
	<div class="firtitle">
	    <h5 class="text1">
	            <i class="fa fa-cube"></i> 原创试题
	        </h5>
	        <p class="text2">
	           快速生成您高质量的试题！
	        </p>
	</div>
	<div class="panel-body-1">
		<div class="panel-heading">
		        <div class="btn-group">
		                <el-button type="primary" plain size="small" @click=save>保存</el-button>
		                <el-button type="primary" plain size="small" @click=back>返回</el-button>
				</div>
				<div class="text3">
					<i class="fa fa-fw fa-th"></i>修改试题
				</div>
		</div>

	<div class="panel-body-2">
		<div class="question-type">
			<label class="xrequired1">类型:</label>
			<el-select v-model="value3" placeholder="请选择" style="width: 100px; height: 50px;">
			    <el-option
			      v-for="item in leixin"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</div>
		<div class="question" id="UEtor1">
		    <label class="xrequired">题目内容:</label>
		    <script id='editor1' type="text/plain" ></script>
		</div>
		<div class="answer1" id="UEtor2">
		    <label class="xrequired">答案解析:</label>
		    <script id='editor2' type="text/plain" ></script>
		</div>
		<div class="answer" id="UEtor3">
		    <label class="xrequired">答案:</label>
		    <script id='editor3' type="text/plain" ></script>
		</div>
		<div class="level">
				<label class="xrequired2">难度:</label>
				<el-select v-model="value2" placeholder="请选择" style="width: 100px; height: 80px;">
				    <el-option
				      v-for="item in nandu"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
		</div>
		<div class="obj1">
		    <label class="xrequired3">适用对象:</label>
		    <el-select v-model="value1" placeholder="请选择" style="width: 100px; height: 80px;">
		        <el-option
		          v-for="item in obj"
		          :key="item.value"
		          :label="item.label"
		          :value="item.value">
		        </el-option>
		    </el-select>
		</div>
		
		
		</div>
		<div class="point">
			<label class="text4">知识点：</label>
			<el-button type="success" plain @click="addTag">添加</el-button>
			<el-dialog title="知识点" :visible.sync="dialogVisible" :before-close="handleClose">
				<span>
					<span class="sidebar-search">
					    <input type="text" class="form-control" value="" style="width: 100% ;" placeholder="输入关键字以搜索">
						<el-tag
                          class="tag"
						  v-for="(item,index) in tags"
						  :key="item.id"
						  @click="change(index);"
						  :type="item.type">
						  {{ item.label }}
						</el-tag>
					</span>
				</span>
				
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible=false">取消</el-button>
					<el-button type="primary" @click="confirmTag">确定</el-button>
				</span>
			</el-dialog>
			<div class="tag-group" >
			  <span class="tag-group__title"></span>
			  <el-tag
				v-for="item in checkTags"
				
			    :key="item.label"
			    :type="item.type"
			    effect="dark">
			    {{ item.label }}
			  </el-tag>
			</div>
		</div>
	   </div>
  </div>
</template>

<script>
export default {
  name: 'UpdateQuestion',
  components: {},
  destroyed() {
  	this.editor1.destroyed();
	this.editor3.destroyed();
	this.editor3.destroyed();
  },
  methods:{
	  back(){
		  this.$router.replace('/index')
	  },
	  save(){
		  if(this.value4=='0'){
	    this.$message({
	    showClose: true,
	    message: '请添加知识点',
	    type: 'error'
	  })}
	  else{
	    this.change = 1
	  }},
	  
	  change(index){
                      // 如果已经被选中
                      console.log(this.tags[index].label);
                      if(this.tags[index].type == 'success') {
                          let id = this.tags[index].id;
                          for(let i = 0;i < this.tempTags.length;i++) {
                              if(id == this.tempTags[i].id) {
                                  var pos = i;
                                  break;
                              }
                          }
                          if(pos != -1) {
                            this.tags[index].type = 'info';
                            this.tempTags.splice(pos, 1);
                          }
                      }else {
                        console.log('添加',this.tags[index].label);
                        this.tags[index].type = 'success';
                        let tag = JSON.parse(JSON.stringify(this.tags[index]));
                        this.tempTags.push(tag);
                      }

	                //   let arrIndex = this.spanIndex.indexOf(index);
	                //   // console.log(arrIndex);
	                  
	                //   if(arrIndex>-1){
	                //       this.spanIndex.splice(arrIndex,1);
	                //   }else{
	                //       this.spanIndex.push(index);
                    //   }
                      },
	  handleClose(done){
		   this.$confirm('确定关闭吗').then(() => {
		             // function(done)，done 用于关闭 Dialog
		             done();
		    
		             console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
		           }).catch(() => {
		    
		             console.log("点击确定时触发");
		           });
	  },
	  
	  getUEContent () {
	  return this.editor1.getContent()
	  this.editor2.getContent()
	  this.editor3.getContent()
	  
      },
      confirmTag () {
          this.dialogVisible=false;
          console.log('进行了confirm');
          this.checkTags = [];
          for(let i = 0;i < this.tempTags.length;i++) {
              this.checkTags.push(this.tempTags[i]);
          }
      },
      addTag () {
          this.dialogVisible=true;
      }
	  //sel1(){
		//  this.$prompt('', '',{
		        //    confirmButtonText: '确定',
					//});
	  //}
  },
  props:{
	  config: {}
  },
  mounted () {
  const _this = this
  this.editor1 = window.UE.getEditor('editor1', this.config)
  this.editor1.addListener('ready', function () {
  _this.editor1.setContent(_this.value)
  })
  this.editor2 = window.UE.getEditor('editor2', this.config)
  this.editor2.addListener('ready', function () {
  _this.editor2.setContent(_this.value)
  })
  this.editor3 = window.UE.getEditor('editor3', this.config)
  this.editor3.addListener('ready', function () {
  _this.editor3.setContent(_this.value)
  })
  },
  
  data() {
    return {
		  dialogVisible:false,
		  editor1:null,
		  editor2:null,
		  editor3:null,
		  tags: [
		            { id:1, type: 'info', label: '椭圆' },
		            { id:2, type: 'info', label: '矩阵' },
		            { id:3, type: 'info', label: '解方程' },
		            { id:4, type: 'info', label: '抛物线' },
		            { id:5, type: 'info', label: '双曲线' }
                  ],
          // checkTags 是已选中的标签,上面的tags是所有的标签
          checkTags: [],
          // 临时存储标签
          tempTags: [],
		  obj:[{
			  value: '选项1',
			  label: '一年级'
			}, {
			  value: '选项2',
			  label: '二年级'
			}, {
			  value: '选项3',
			  label: '三年级'
			}, {
			  value: '选项4',
			  label: '四年级'
			},{
			  value: '选项5',
			  label: '五年级'
			}, {
			  value: '选项6',
			  label: '六年级'
			}, {
			  value: '选项7',
			  label: '初一'
			}, {
			  value: '选项8',
			  label: '初二'
			},{
			  value: '选项9',
			  label: '初三'
			}],
		  nandu:[{
			value: '选项1',
			  label: '简单'
			}, {
			  value: '选项2',
			  label: '中等难度'
			}, {
			  value: '选项3',
			  label: '困难'
			}, {
			  value: '选项4',
			  label: '超难'
			}],
          leixin: [{
            value: '选项1',
            label: '选择题'
          }, {
            value: '选项2',
            label: '填空题'
          }, {
            value: '选项3',
            label: '判断题'
          }, {
            value: '选项4',
            label: '解答题'
          }, {
            value: '选项5',
            label: '作文题'
          }],
          value1: '',
		  value2:'',
		  value3:'',
		  input: '',
		  
        }
      }
}

</script>

<style scoped>
	.whole-box {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  overflow: auto;
	}
	.firtitle {
	 margin:20px 0;
	 background-color: white;
	 border: 1px solid transparent;
	 border-radius: 3px;
	 padding: 15px 0 15px 15px;
	 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
	 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
	 text-align: left;
	}

	.text1 {
	  font-size: 14px;
	  font-weight: 400;
	  color: black;
	  margin: 0 0 0 0;
	}
	
	.text2 {
	  font-size: 10px;
	  color: #777777;
	  margin: 0 0 0 0;
	}
	.text3 {
	  font-size: 18px;
	  font-weight: 500;
	  margin: 0 0 0 0;
	}
	.btn-group {
	   float: right;
	   margin-right: 15px;
	}
	.sidebar-search{
		float: inherit;
		
	}
	.panel-body-1 {
		margin-bottom: 20px;
		background-color: white;
		border: 1px solid transparent;
		border-radius: 3px;
		-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
		text-align: left;
	}
	.panel-body-2 {
	    overflow: hidden;
	}
	.xrequired .xrequired1 .xrequired2 .xrequired3 .text4 {
	    display: inline-block;
	    max-width: 100%;
	    margin-bottom: 5px;
	    font-weight: bold;
	}
	.question-type{
		padding:0px 0px 10px 15px;
	    display: inline-block;
	}
	.panel-heading {
	  border-bottom: 1px solid #eeeeee;
	  padding: 15px 0 15px 15px;
	}
	.question{
		
		padding:0px 0px 10px 15px;
	}
	.answer{
		
		padding:0px 0px 10px 15px;
	}
	.answer1{
		padding:0px 0px 10px 15px;
		
	}
	.level{
		float: left;
		margin-left: 15px;
		
	}
	.obj1{
		float: left;
		margin-left: 15px;
		
	}
	.point{
		float: left;
		margin-left: 15px;
		margin-bottom:15px;
		font-size: 15px;
		font-weight: 400px;
	}
    .tag {
        cursor: pointer;
		
    }
	.tag-group{
		margin-top: 10px;
	}
</style>
